<template>
  <div>
    <el-card style="margin-top:30px; height:80px;">
      <bread-crumb />
    </el-card>

    <el-card style="margin: 40px auto;">
      <el-row type="flex" justify="space-between" style="margin-bottom:20px;">
        <el-col>
          店铺名称：<el-input v-model="value4" placeholder="请输入内容" style="width:250px;" />
        </el-col>
        <el-col>
          订单号：  <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in orderNumbersOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col>
          配送方式：<el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in sendWaysOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-between">
        <el-col>
          下单日期: <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
          />
        </el-col>
        <el-col>
          手机号：<el-select v-model="value3" placeholder="请选择">
            <el-option
              v-for="item in phoneOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col>
          <el-col style="margin-top:3px" type="flex">
            <el-button type="primary" size="mini">查询</el-button>
            <el-button type="plain" size="mini">重置</el-button>
            <el-button type="text" style="margin-left:8px;">展开</el-button>
          </el-col>
        </el-col>

      </el-row>

      <!-- 按钮区域 -->
      <el-row type="flex" style="margin-top:20px;">
        <el-col justify-content="start">
          <el-button type="primary">全部</el-button>
          <el-button style="margin-left:-1px;">待支付</el-button>
          <el-button style="margin-left:-1px;">批量操作</el-button>
          <el-button style="margin-left:-1px;">待配送</el-button>
          <el-button style="margin-left:-1px;">待发货</el-button>
          <el-button style="margin-left:-1px;">已收获</el-button>
          <el-button style="margin-left:-1px;">售后退款</el-button>
          <el-button style="margin-left:-1px;">已经取消</el-button>
          <el-button style="margin-left:-1px;">已经完成</el-button>
        </el-col>
        <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      </el-row>

      <!-- 表格区域 -->
      <el-table
        :data="orderTableList"
        style="width: 100%;margin-top:20px;"
      >
        <el-table-column
          width="80"
        />
        <el-table-column
          prop="id"
          label="商户ID"
          width="80"
        />
        <el-table-column
          prop="name"
          label="商户名称"
          width="80"
        />
        <el-table-column
          prop="orderNumber"
          label="订单号"
          width="100"
        />
        <el-table-column
          prop="shopNumber"
          label="商品数量"
        />
        <el-table-column
          prop="oderDate"
          label="下单时间"
        />
        <el-table-column
          prop="pinci"
          label="订单金额"
        />
        <el-table-column
          prop="sendWays"
          label="配送方式"
        />
        <el-table-column
          prop="resposibelPelpeo"
          label="收获人/提货人"
        />
        <el-table-column
          prop="status"
          label="状态"
        />
        <el-table-column
          label="操作"
          width="160"
        >
          <template slot-scope="">
            <el-button type="text" style="margin-left:8px;" size="mini">查看</el-button>
            <el-button type="text" style="margin-left:8px;" size="mini">删除</el-button>
            <el-button type="text" style="margin-left:8px;" size="mini">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        :current-page="page.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        style="margin-top:15px; float:right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!-- 提示信息 -->
      <div style="margin-top:15px;">第1/80页</div>
    </el-card>

  </div>
</template>

<script>
// 导入面包屑导航组件
import BreadCrumb from '@/components/Breadcrumb/index.vue';
// 导入获取订单列表数据的方法
import { getOrderList, getOrderListPage } from '@/api/orderList.js';
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      // 订单表格数据
      orderTableList: [],
      // 分页数据
      page: {
        page: 1,
        size: 10,
        total: 10,
      },
      // 订单号下拉
      orderNumbersOptions: [],
      // 配送方式下拉
      sendWaysOptions: [],
      // 手机号下拉
      phoneOptions: [],
      value1: '',
      value2: '',
      value3: '',
      value4: '',
    };
  },
  created() {
    this.getOrderLists();
    this.getOrderListPage();
  },
  methods: {
    // 获取表单数据
    async getOrderLists() {
      const { data } = await getOrderList();
      this.page.total = data.length;
    },
    // 获取表单分页数据
    async getOrderListPage() {
      const { data } = await getOrderListPage({ _page: this.page.page, _limit: this.page.size });
      this.orderTableList = data;
      // console.log(data);
      data.forEach(item => {
        const orderNumber = {};
        const sendWaysOptions = {};
        const phoneNumeber = {};

        orderNumber.value = item.id;
        // 合成订单号数组
        orderNumber.label = item.orderNumber;
        this.orderNumbersOptions.push(orderNumber);
        // 合成配送方式数组
        sendWaysOptions.value = item.id;
        sendWaysOptions.label = item.sendWays;
        this.sendWaysOptions.push(sendWaysOptions);
        // 合成手机号的下拉
        phoneNumeber.value = item.id;
        phoneNumeber.label = item.phonenumber;
        this.phoneOptions.push(phoneNumeber);
      });
    },
    // 处理当前页显示多少条数据
    handleSizeChange(pageSize) {
      this.page.size = pageSize;
      this.getOrderListPage();
    },

    // 处理当前显示第几页
    handleCurrentChange(newPage) {
      this.page.page = newPage;
      this.getOrderListPage();
    },

  },
};
</script>

<style>

</style>
